<template>
<div class="index-wrapper">
	<div class="scroll-box" style="overflow:auto;">

		<scroller :on-infinite="loadMore" ref="myScroller">

			<div class="header-wrapper">
				<div class="position-box">
					<div class="left">
						<i class="icon iconfont icon-dingwei"></i>
						<span class="text">
						上海黄埔大道上海黄埔大道上海黄埔大道上海黄埔大道
					</span>
						<i class="icon iconfont icon-arrowDown"></i>
					</div>
				</div>
				<div class="search-box">
					<div class="search">
						搜索商家/商品
					</div>
				</div>
				<div class="swipper-wrapper-box">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" style="width:auto;padding:0 5px;" v-for="item in quickDataList">{{item.title}}</div>
						</div>
						<!-- 如果需要滚动条 -->
						<div class="swiper-scrollbar" style="bottom:-3px;"></div>
					</div>
				</div>
			</div>
			<div class="slide-wrapper">
				<mt-swipe :auto="0">
					<mt-swipe-item>
						<div class="slide-item">
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
						</div>
					</mt-swipe-item>
					<mt-swipe-item>
						<div class="slide-item">
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
							<div class="item">
								<img src="../../static/image/1.png" alt="">
								<p>美食</p>
							</div>
						</div>
					</mt-swipe-item>
				</mt-swipe>
			</div>
			<div class="shop-list">

				<h3>推荐商家</h3>
				<div class="" v-for="(sl,idx) in sellerList">
					<shop :sl="sl" :idx="idx"></shop>
				</div>

			</div>
		</scroller>

	</div>
	<footer-bar></footer-bar>
</div>
</template>

<script>
import Vue from 'vue';
import Shop from '@/components/shop/shop';
import FooterBar from '@/components/footer/index';

import VueScroller from 'vue-scroller';
Vue.use(VueScroller);

import {
	Loadmore
} from 'mint-ui';

import {
	Swipe,
	SwipeItem
} from 'mint-ui';
// import $ from 'jquery';
import {
	swiper,
	swiperSlide
} from 'vue-awesome-swiper'

export default {
	data() {
		return {
			noData: false,
			totalList: [],
			sellerList: [],
			topStatus: '',
			quickDataList: [{
					title: '馄饨'
				},
				{
					title: '锅贴'
				},
				{
					title: '大娘水饺'
				},
				{
					title: '鲜花5折'
				},
				{
					title: '小满'
				},
				{
					title: '超级鸡车'
				},
				{
					title: '红唇串串'
				},
				{
					title: '色拉'
				},
				{
					title: '海南鸡'
				},
				{
					title: '吉祥馄饨'
				},

			]
		}
	},
	mounted() {
		var mySwiper = new Swiper('.swiper-container', {
			direction: 'horizontal',
			freeMode: true,
			freeModeMomentum: true,
			slidesPerView: 'auto',
			// 如果需要滚动条
			scrollbar: '.swiper-scrollbar',
		})

		//获取商家信息
		this.axios({
			url: 'http://localhost:8080/api/seller',
			method: 'get'
		}).then((res) => {
			this.totalList = res.data.data;
			let temp = this.totalList.concat([]);
			this.sellerList = temp.splice(0, 3);
		})
	},
	methods: {
		loadMore(done) {
			if (this.noData) {
				setTimeout(() => {
					this.$refs.myScroller.finishInfinite(2);
				})
				return;
			}
			let self = this;
			setTimeout(() => {
				let total = self.totalList.concat([]);
				let start = self.sellerList.length;
				let temp = total.splice(start, 2);
				console.log(temp, '[]');
				if (temp.length == 0) {
					self.noData = true;
				}
				self.sellerList = self.sellerList.concat(temp);
				self.$refs.myScroller.finishPullToRefresh();
				done();
			}, 1500)
		}
	},
	components: {
		FooterBar,
		swiper,
		swiperSlide,
		Shop
	}
}
</script>

<style lang="less" >
@import '../../static/var.less';
@import '../assets/swipper/swiper-3.4.2.min.css';
//让滚动条消失
::-webkit-scrollbar {
    width: 0;
}
.index-wrapper {
    height: 100%;
    position: relative;
    .scroll-box {
        position: fixed;
        top: 0;
        bottom: @base*100rem;
        width: 100%;
        overflow: hidde;

        .header-wrapper {
            width: 100%;
            height: @base*244rem;
            box-sizing: border-box;
            background: @main-color;
            padding: @base*20rem @base*28rem;
            .position-box {
                width: 100%;
                height: @base*69rem;
                line-height: @base*69rem;
                .left {
                    i {
                        font-size: @base*40rem;
                        color: #fff;
                        float: left;
                    }
                    .text {
                        width: @base*333rem;
                        height: @base*52rem;
                        overflow: hidden;
                        float: left;
                        font-size: @base*32rem;
                        color: #fff;
                    }
                }
            }
            .search-box {
                height: @base*72rem;
                width: 100%;
                padding-top: @base*10rem;
                .search {
                    width: 100%;
                    height: @base*72rem;
                    background: #fff;
                    text-align: center;
                    line-height: @base*72rem;
                    color: @fc1;
                    font-size: @base*24rem;
                    border-radius: @base*30rem;
                }
            }
            .swipper-wrapper-box {
                margin-top: @base*13rem;
                font-size: @base*24rem;
                color: #fff;
                font-weight: 200;
            }
        }
        .mint-swipe {
            height: @base*354rem;
            .slide-item {
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                background: #fff;
                .item {
                    width: 25%;
                    height: @base*150rem;
                    align-items: center;
                    margin-top: @base*22rem;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    img {
                        height: @base*90rem;
                        width: @base*90rem;
                    }
                    p {
                        margin-top: @base*10rem;
                        font-size: @base*24rem;
                        color: @fc1;
                    }
                }
            }
        }
        .mint-swipe-indicators {
            .mint-swipe-indicator {
                width: @base*10rem;
                height: @base*10rem;
                background: #333;
                opacity: 0.2;
                &.is-active {
                    opacity: 0.5;
                }
            }

        }
        .shop-list {
            margin-top: @base*20rem;
            background: #fff;
            h3 {
                font-size: @base*16rem;
                padding: @base*20rem;
            }
        }
    }
}
</style>
